<template>
  <div>
    <div v-for="item in data" class="record-item" :class="{'is-hover': hoverId==item.id}"  @mouseenter="hoverId=item.id" @mouseleave="hoverId=-1">
      <span class="record-name text-nowrap" v-if="editId != item.id">
        {{item.title}}
      </span>
      <input type="text" ref="inupt" v-else v-model="item.title" @blur="changeDetail">
      <div class="record-button">
        <div class="icon" v-show="editId != item.id" @click.stop="doEdit">
          <i class="icon-record-edit"></i>
        </div>
        <div class="icon" v-show="editId == item.id">
          <i class="icon-record-check el-icon-check"></i>
        </div>
        <div class="icon">
          <i class="icon-record-delete el-icon-close"></i>
        </div>
      </div>
    </div>
    <div class="add-new-block" @click="addNewSearch">
      <i class="el-icon-plus"></i>
      搜索条件
    </div>
    <m-searchCriteria v-if="searchDialog" :visible.sync="searchDialog" :data="searchForm" :isEdit="isEdit"></m-searchCriteria>
  </div>
  
</template>

<script>
import SearchCriteria from '../searchCriteria'
  export default {
    components: {
      'm-searchCriteria': SearchCriteria
    },
    props: ['data'],
    watch: {
      editId(val) {
        if(val != this.detail.id){
          this.hover = false
        }
      },
      editId(val) {
        if(val != this.detail.id){
          this.hover = false
        }
      }
    },
    data () {
      return {
        hoverId: null,
        editId: null,
        hover: false, //是否 鼠标hover状态
        isEdit: false,
        searchDialog: false,
        searchForm: {}
      }
    },
    methods: {
      // 修改单个条件的内容
      changeDetail() {

      },
      /**
       * @description 进入编辑状态
       * 如果存在别的条目在编辑状态，则别的条目退出编辑状态
       */
      doEdit() {
        this.$emit('edit', this.detail.id)
      },
      addNewSearch() {
        this.searchForm = {}
        this.isEdit = false
        this.searchDialog = true;
      }
    }
  }
</script>

<style lang="scss">

.record-item{
  border-radius: 20px;
  border: 1px solid #919191;
  margin: 6px 4px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  span{
    display: block;
    color: #919191;
    font-size: 16px;
    line-height: 26px;
    padding: 0 15px;
  }
  input{
    display: block;
    width: calc(100% - 58px);
    border: 0;
    outline: 0;
    padding: 0 15px;
    line-height: 26px;
    height: 26px;
    font-size: 16px;
  }
  .record-button{
    position: absolute;
    right: 0;
    top: 0;
    display: none;
    .icon{
      width: 24px;
      height: 26px;
      display: block;
      text-align: center;
      box-sizing: border-box;
      float: left;
      background: #fff;
      border-left: 1px solid #0073dd;
      cursor: pointer;
      i{
        vertical-align: top;
      }
      .el-icon-check {
        color: #0073dd;
        font-size: 15px;
      }
      .el-icon-close {
        color: #0073dd;
        font-size: 15px;
      }
    }
  }
}
.record-item.is-hover{
  border-color: #0073dd;
  span{
    color: #0073dd;
    width: calc(100% - 58px)
  }
  .record-button{
    display: block;
  }
}
.record-item.is-active{
  background: #0073dd;
  border-color: #0073dd;
  span{
    color: #fff;
  }
}
</style>
